<template>
	<div class="goodList" :id="attrs.id">
		<div class="titles">
			<div class="title">{{ attrs.name }}</div>
			<div class="subtitle">{{ attrs.frontName }}</div>
		</div>
		<ul class="goods" @click="goDetail">
			<li class="good">
				<div class="goodiv">
					<img
						class="goodivimg1"
						src="https://yanxuan-item.nosdn.127.net/ee0965b486874661667a9168ae0738fe.png?type=webp&imageView&quality=95&thumbnail=245x245"
						alt=""
						data-id="4013106"
					/>
					<img
						class="goodivimg"
						src="https://yanxuan-item.nosdn.127.net/b7d5a39aca6b0bf27991d2f6ef30f071.jpg?type=webp&quality=95&thumbnail=245x245&imageView"
						alt=""
						data-id="4013106"
					/>
					<div class="goodivfooter">
						<div class="goodivFooterTitle" data-id="4013106">
							高钙高蛋白，脆脆虾 20克
						</div>
						<div class="goodivFooterPrice">¥18</div>
						<div class="goodivFooterIintroduce">整虾可食，口口松脆</div>
					</div>
				</div>
			</li>
			<li class="good" v-for="item in itemList" :key="item.id">
				<div class="goodiv">
					<img
						class="goodivimg1"
						v-lazy="item.listPicUrl"
						alt=""
						data-id="3995824"
					/>
					<img
						class="goodivimg"
						v-lazy="item.scenePicUrl"
						alt=""
						data-id="3995824"
					/>
					<div class="goodivfooter">
						<div class="goodivFooterTitle" data-id="4013106">
							{{ item.name }}
						</div>
						<div class="goodivFooterPrice">¥{{ item.retailPrice }}</div>
						<div class="goodivFooterIintroduce">{{ item.simpleDesc }}</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	props: ["attrs", "itemList"],
	methods: {
		goDetail(event) {
			// console.log(event)
			const { id } = event.target.dataset
			if (id) {
				this.$router.push({
					name: "Detail",
					query: {
						id,
					},
				})
			}
		},
	},
}
</script>

<style lang="less" scoped>
.goodList {
	padding: 30px 0 20px;
	.titles {
		margin-bottom: 30px;
		.title {
			text-align: center;
			font-size: 24px;
			line-height: 44px;
		}
		.subtitle {
			text-align: center;
			font-size: 14px;
			color: #999;
		}
	}
	.goods {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.good {
			margin-bottom: 40px;
			float: left;
			.goodiv {
				text-align: center;
				position: relative;
				width: 245px;
				height: 401px;
				.goodivimg1,
				.goodivimg {
					width: 245px;
					height: 245px;
				}
				.goodivimg {
					position: absolute;
					left: 0;
					opacity: 0;
				}
				.goodivFooterTitle {
					margin-top: 30px;
					cursor: pointer;
					font-size: 14px;
					font-weight: bold;
				}
				.goodivFooterTitle:hover {
					color: #b4a078;
				}
				.goodivFooterPrice {
					width: 180px;
					color: red;
					margin: 10px auto 0;
					padding-bottom: 10px;
					border-bottom: 1px solid #e8e8e8;
				}
				.goodivFooterIintroduce {
					color: #999;
					padding: 10px 0 40px;
				}
			}
		}
		.good:hover .goodivimg {
			opacity: 1;
		}
		.good:hover {
			background: #f4f0ea;
		}
	}
}
</style>
